<p>
  <md-checkbox (change)="isVertical = $event.checked">Show Button Toggles Vertical</md-checkbox>
</p>

<h1>Exclusive Selection</h1>

<section class="demo-section">
  <md-button-toggle-group name="alignment" [vertical]="isVertical">
    <md-button-toggle value="left"><md-icon>format_align_left</md-icon></md-button-toggle>
    <md-button-toggle value="center"><md-icon>format_align_center</md-icon></md-button-toggle>
    <md-button-toggle value="right"><md-icon>format_align_right</md-icon></md-button-toggle>
    <md-button-toggle value="justify" disabled><md-icon>format_align_justify</md-icon></md-button-toggle>
  </md-button-toggle-group>
</section>

<h1>Disabled Group</h1>

<section class="demo-section">
  <md-button-toggle-group name="checkbox" [vertical]="isVertical" disabled>
    <md-button-toggle value="bold">
      <md-icon class="md-24">format_bold</md-icon>
    </md-button-toggle>
    <md-button-toggle value="italic">
      <md-icon class="md-24">format_italic</md-icon>
    </md-button-toggle>
    <md-button-toggle value="underline">
      <md-icon class="md-24">format_underline</md-icon>
    </md-button-toggle>
  </md-button-toggle-group>
</section>

<h1>Multiple Selection</h1>
<section class="demo-section">
  <md-button-toggle-group multiple [vertical]="isVertical">
    <md-button-toggle>Flour</md-button-toggle>
    <md-button-toggle>Eggs</md-button-toggle>
    <md-button-toggle>Sugar</md-button-toggle>
    <md-button-toggle disabled>Milk (disabled)</md-button-toggle>
  </md-button-toggle-group>
</section>

<h1>Single Toggle</h1>
<md-button-toggle>Yes</md-button-toggle>

<h1>Dynamic Exclusive Selection</h1>
<section class="demo-section">
  <md-button-toggle-group name="pies" [(ngModel)]="favoritePie" [vertical]="isVertical">
    <md-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
      {{pie}}
    </md-button-toggle>
  </md-button-toggle-group>
  <p>Your favorite type of pie is: {{favoritePie}}</p>
</section>
